<template>
  <!--  地图  -->
  <div class="map-sty" ref="chartMap"/>
</template>

<script>
import echarts from "_echarts@4.9.0@echarts";

export default {
  name: "table_map",
  data() {
    return {
      areaData: [
        {name: '婺城区', value: 1.2, detail: [123, 123, 123, 123, 8]},
        {name: '金东区', value: 1.2, detail: [123, 123, 123, 123, 8]},
        {name: '永康市', value: 8.9, detail: [123, 123, 123, 123, 8]},
        {name: '武义县', value: 1.2, detail: [123, 123, 123, 123, 8]},
        {name: '浦江县', value: 4.0, detail: [123, 123, 123, 123, 8]},
        {name: '义乌市', value: 1.2, detail: [123, 123, 123, 123, 8]},
        {name: '兰溪市', value: 1.2, detail: [123, 123, 123, 123, 8]},
        {name: '东阳市', value: 5.2, detail: [123, 123, 123, 123, 8]},
        {name: '磐安县', value: 1.2, detail: [123, 123, 123, 123, 8]},
      ]
    }
  },
  created() {
    // 注册金华地图
    echarts.registerMap("jh", require("../../static/jinhua.json"));
    echarts.registerMap("jhLine", require("../../static/jinhua_outline.json"));
  },
  mounted() {
    this.echartsMap(this.areaData);
  },
  methods: {
    //地图配置
    echartsMap(data) {
      let imgElement = new Image()
      imgElement.src = require('../assets/bg.png')
      let redData = data.filter(item => item.value >= 8)
      let cityPoint = {
        // "市本级": [119.702579, 29.202607],
        "婺城区": [119.652579, 29.082607],
        "金东区": [119.681264, 29.095835],
        "武义县": [119.819159, 28.896563],
        "浦江县": [119.893363, 29.451254],
        "磐安县": [120.44513, 29.052627],
        "兰溪市": [119.460521, 29.210065],
        "义乌市": [120.074911, 29.306863],
        "东阳市": [120.23334, 29.262546],
        "永康市": [120.036328, 28.895293],
      }
      let colorList = [
        {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(255,0,0,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(255,165,0,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(255,255,0,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(60,179,113,0.89)'},
            {offset: 1, color: 'rgba(9,43,90,0.2)'}
          ],
        },
      ]
      let option = {
        visualMap: {
          pieces: [
            {min: 8, label: '红色区域(>8%)', color: colorList[0]},
            {min: 4, max: 8, label: '橙色区域(4~8%)', color: colorList[1]},
            {min: 2, max: 4, label: '黄色区域(2~4%)', color: colorList[2]},
            {max: 2, label: '绿色区域(<2%)', color: colorList[3]},
          ],
          inRange: {
            symbol: 'circle'
          },
          outOfRange: {
            symbol: 'circle'
          },
          textStyle: {
            color: '#fff'
          },
          seriesIndex: 0,
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'transparent',
          formatter: params => {
            if (params.seriesIndex || !params.data) return ''
            let data = params
            return `<div class="chart_tip_4f795181">
                      <div class="chart_tip_4f795181_title">${data.name}</div>
                      <div class="chart_tip_4f795181_text">参保人数 <span unit="人">${data.data.detail[0]}</span></div>
                      <div class="chart_tip_4f795181_text">基金收入 <span unit="万元">${data.data.detail[1]}</span></div>
                      <div class="chart_tip_4f795181_text">基金支出 <span unit="万元">${data.data.detail[2]}</span></div>
                      <div class="chart_tip_4f795181_text">案件数 <span unit="件">${data.data.detail[3]}</span></div>
                      <div class="chart_tip_4f795181_text">事故率 <span unit="">${data.data.detail[4]}%</span></div>
                    </div>`
          }
        },
        geo: [
          {
            map: 'jh',
            aspectScale: .85,
            layoutCenter: ['50%', '45%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: '#10244D',
              borderWidth: 1,
              opacity: 0.8,
              borderColor: '#68ABC6'
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: '15',
            },
            selectedMode: false,
            emphasis: {
              label: {
                color: '#fff',
                fontSize: '15',
              },
              itemStyle: {
                areaColor: 'rgba(111,238,248,0.5)',
                borderWidth: 1,
                borderColor: '#68ABC6'
              },
            },
            z: 5
          }, {
            map: 'jhLine',
            aspectScale: .85,
            layoutCenter: ['50%', '45%'],
            layoutSize: '100%',
            itemStyle: {
              /*areaColor: {
                image: imgElement
              },*/
              areaColor: '#0E3870',
              borderColor: '#e5edf1',
              borderWidth: 1.5,
              shadowBlur: 15,
              shadowColor: 'rgba(255,255,255,0.1)',
            },
            silent: true,
            z: 4
          }, {
            map: 'jhLine',
            aspectScale: .85,
            layoutCenter: ['50%', '47.5%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: '#6FEEF8',
              borderWidth: 0,
            },
            silent: true,
            z: 3
          }, {
            map: 'jhLine',
            aspectScale: .85,
            layoutCenter: ['50%', '49%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: '#3866E2',
              borderWidth: 0,
            },
            silent: true,
            z: 2
          }, {
            map: 'jhLine',
            aspectScale: .85,
            layoutCenter: ['50%', '50.5%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: '#273C8C',
              borderWidth: 0,
            },
            silent: true,
            z: 1
          },
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: data
          }, {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbol: 'triangle',
            symbolSize: 12,
            symbolRotate: 180,
            itemStyle: {
              color: {
                type: 'linear', x2: 0, y2: 1,
                colorStops: [
                  {color: '#ff0000', offset: 0},
                  {color: 'rgba(255,0,0,0.5)', offset: 1},
                ]
              }
            },
            label: {
              show: true,
              formatter: '{text|{b}}',
              position: 'top',
              rich: {
                text: {
                  color: '#fff',
                  fontSize: 16,
                  fontWeight: 'bold',
                  width: 70,
                  height: 24,
                  align: 'center',
                  backgroundColor: '#E94D6C',
                  borderRadius: 3
                }
              }
            },
            data: redData.map(item => {
              return {
                name: item.name,
                value: cityPoint[item.name]
              }
            }),
            z: 8
          }
        ]
      }
      let myChart = echarts.init(this.$refs.chartMap)
      myChart.setOption(option)
    },
  }
}
</script>

<style scoped>
.map-sty {
  height: 55%;
  width: 44%;
  margin: 0 auto;
  background: url("../assets/map_bg.png") no-repeat center;
  overflow: hidden;
  background-size: contain;
  position: absolute;
  z-index: 0;
}
</style>

<style>
.chart_tip_4f795181 {
  background: url("../assets/tip_bg.png") no-repeat;
  width: 380px;
  height: 256px;
  padding: 34px 58px 44px;
  box-sizing: border-box;
  text-align: left;
}

.chart_tip_4f795181_title {
  color: #CEDEE9;
  font-size: 24px;
  line-height: 36px;
  padding-left: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.chart_tip_4f795181_text {
  color: #C7D8E3;
  font-size: 15px;
  position: relative;
  line-height: 24px;
}

.chart_tip_4f795181_text span {
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  right: 20px;
}

.chart_tip_4f795181_text span:after {
  content: attr(unit);
  position: absolute;
  width: 30px;
  margin-left: 5px;
  font-weight: normal;
  font-size: 15px;
}
</style>
